<script setup lang="ts">
import { NScrollbar, useMessage, NSpin } from 'naive-ui'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
import { sendRequest } from '@/utils/api'

const props = defineProps({
  title: { type: String, default: () => '2024年01月工资发放明细表' },
  id: { type: Array, default: () => null }
})

const route = useRoute()
const message = useMessage()
const spinShow: any = ref(false)

//处理标题
function toTitle(val: any) {
  return val ? val.toString().replace('-', '年') + '月工资发放明细表' : '2024年01月工资发放明细表'
}

// 获取详情
const dispatchInfo = ref<any>({})
const getInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest({
    module: 'workBench',
    api: 'payrollItem',
    uri: {
      id: route.query.id as never
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  dispatchInfo.value = res.data
  spinShow.value = false
}

watch(
  () => route,
  () => {
    if (
      (route.path == '/OA/Workbench/PayrollDetail' ||
        route.path == '/OA/Workbench/PayrollSendDetail') &&
      route.query.id
    ) {
      getInfo()
    }
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <div class="topTitleMain">{{ toTitle(dispatchInfo?.issueMonth) || props.title }}</div>
            <div class="basic-info">
              <div class="itemBox">
                <span>姓名：</span>
                <span>{{ dispatchInfo?.userName }}</span>
              </div>
              <div class="itemBox">
                <span>身份证号：</span>
                <span>{{ dispatchInfo.idCard }}</span>
              </div>
              <div class="itemBox">
                <span>岗位等级：</span>
                <span>{{ dispatchInfo.postLevel }}</span>
              </div>
            </div>
            <div class="topTitle">基本工资</div>
            <div class="basic-info" style="border: none">
              <div class="itemBox">
                <span>岗位工资：</span>
                <span>{{ dispatchInfo.postSalary }}</span>
              </div>
              <div class="itemBox">
                <span>薪级工资：</span>
                <span>{{ dispatchInfo.gradeSalary }}</span>
              </div>
              <div class="itemBox">
                <span>试用期工资：</span>
                <span>{{ dispatchInfo.probationSalary }}</span>
              </div>
            </div>
            <div class="topTitleA">绩效工资</div>
            <div class="basic-info" style="border: none; margin-bottom: 0;">
              <div class="itemBox">
                <span>特岗津贴：</span>
                <span>{{ dispatchInfo.specialAllowance }}</span>
              </div>
              <div class="itemBox">
                <span>基础性绩效奖：</span>
                <span>{{ dispatchInfo.basicPerformanceWage }}</span>
              </div>
              <div class="itemBox">
                <span>奖励性绩效工资：</span>
                <span>{{ dispatchInfo.rewardPerformanceWage }}</span>
              </div>
            </div>
            <div class="basic-info" style="border: none; margin-bottom: 0">
              <div class="itemBox">
                <span>基础性绩效奖：</span>
                <span>{{ dispatchInfo.basicPerformanceBonus }}</span>
              </div>
              <div class="itemBox">
                <span>年度考核奖：</span>
                <span>{{ dispatchInfo.annualAssessmentBonus }}</span>
              </div>
              <div class="itemBox">
                <span>上年度绩效工资：</span>
                <span>{{ dispatchInfo.lastYearPerformanceWage }}</span>
              </div>
            </div>
            <div class="basic-info" style="border: none; ">
              <div class="itemBox">
                <span>年终一次性奖金：</span>
                <span>{{ dispatchInfo.yearEndBonus }}</span>
              </div>
              <div class="itemBox">
                <span>年终个人考核奖：</span>
                <span>{{ dispatchInfo.yearEndIndividualAssessment }}</span>
              </div>
              <div class="itemBox">
                <span>上年度综合目标绩效奖：</span>
                <span>{{ dispatchInfo.lastYearComprehensivePerformanceBonus }}</span>
              </div>
            </div>
            <div class="topTitleA">改革性补贴及其他</div>
            <div class="basic-info" style="border: none; margin-bottom: 0rem">
              <div class="itemBox">
                <span>应休未休年休假工资报酬：</span>
                <span>{{ dispatchInfo.annualLeaveWage }}</span>
              </div>
              <div class="itemBox">
                <span>无线通讯费：</span>
                <span>{{ dispatchInfo.communicationAllowance }}</span>
              </div>
              <div class="itemBox">
                <span>其他补贴：</span>
                <span>{{ dispatchInfo.otherSubsidies }}</span>
              </div>
            </div>
            <div class="title-info" style="border: none; border-bottom: 1px dashed #bc9e70">
              <div class="itemBox" style="margin-bottom: 0">
                <span class="topTitleB">应发工资：</span>
                <span class="fontB">{{ dispatchInfo.grossWage }}</span>
              </div>
            </div>
            <div class="topTitle">代扣代缴</div>
            <div class="basic-info" style="border: none; margin-bottom: 0">
              <div class="itemBox">
                <span>住房公积金：</span>
                <span>{{ dispatchInfo.housingFund }}</span>
              </div>
              <div class="itemBox">
                <span>个人所得税：</span>
                <span>{{ dispatchInfo.incomeTax }}</span>
              </div>
              <div class="itemBox">
                <span>医疗保险：</span>
                <span>{{ dispatchInfo.medicalInsurance }}</span>
              </div>
            </div>
            <div class="basic-info" style="border: none; margin-bottom: 0">
              <div class="itemBox">
                <span>养老金：</span>
                <span>{{ dispatchInfo.pension }}</span>
              </div>
              <div class="itemBox">
                <span>职业年金：</span>
                <span>{{ dispatchInfo.annuity }}</span>
              </div>
              <div class="itemBox">
                <span>失业保险：</span>
                <span>{{ dispatchInfo.unemploymentInsurance }}</span>
              </div>
            </div>
            <div class="basic-info" style="border: none; margin-bottom: 0">
              <div class="itemBox">
                <span>房租：</span>
                <span>{{ dispatchInfo.rent }}</span>
              </div>
              <div class="itemBox">
                <span>工会费：</span>
                <span>{{ dispatchInfo.unionFees }}</span>
              </div>
              <div class="itemBox">
                <span>其他扣款：</span>
                <span>{{ dispatchInfo.otherDeductions }}</span>
              </div>
            </div>
            <div class="title-info" style="border: none; border-bottom: 1px dashed #bc9e70">
              <div class="itemBox" style="margin-bottom: 0">
                <span class="topTitleB">代扣代缴合计：</span>
                <span class="fontB">{{ dispatchInfo.totalDeductions }}</span>
              </div>
            </div>
            <div class="topTitle">其他</div>
            <div class="basic-info" style="border: none; margin-bottom: 0">
              <div class="itemBox">
                <span>补发工资：</span>
                <span>{{ dispatchInfo.backPay }}</span>
              </div>
              <div class="itemBox">
                <span>扣发工资：</span>
                <span>{{ dispatchInfo.deductedWage }}</span>
              </div>
              <div class="itemBox">
                <span>代扣代缴补缴：</span>
                <span>{{ dispatchInfo.totalSupplementaryDeductions }}</span>
              </div>
            </div>
            <div class="basic-info" style="border: none; margin-bottom: 0">
              <div class="itemBox">
                <span>代扣代缴退缴：</span>
                <span>{{ dispatchInfo.totalRefundedDeductions }}</span>
              </div>
            </div>
            <div class="title-info" style="border: none; border-bottom: 1px dashed #bc9e70">
              <div class="itemBox" style="margin-bottom: 0">
                <span class="topTitleB">其他合计：</span>
                <span class="fontB">{{ dispatchInfo.otherTotals }}</span>
              </div>
            </div>
            <div class="title-info" style="border: none">
              <div class="itemBox">
                <span class="topTitleB">实发工资：</span>
                <span class="fontB">{{ dispatchInfo.netWage }}</span>
              </div>
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
</template>

<style scoped lang="scss">
@mixin CommonFont {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
  text-align: left;
  font-style: normal;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitleMain {
      font-size: 36px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5FB17F;
      margin-bottom: 5rem;
      text-align: center;
    }

    .topTitle {
      font-size: 23px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5FB17F;
      margin: 0rem 0 5rem 0;
    }

    .topTitleA {
      font-size: 23px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5FB17F;
      margin-top: -20rem;
      margin-bottom: 5rem;
    }

    .topTitleB {
      font-size: 25px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: brown;
      margin-bottom: 5rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 10rem 33rem 0rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;

      .title_info {
        display: flex;
        width: 100%;
        height: auto;
        border-bottom: 1px dashed #bc9e70;
        margin-bottom: 14rem;
        margin-top: -5rem;

        .itemBox {
          display: flex;
          justify-content: center;
          margin-bottom: 10rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            text-align: right;
            width: 270rem;
          }

          span:last-child {
            display: inline-block;
            width: 200rem;
          }
        }
      }

      .basic-info {
        display: flex;
        width: 100%;
        height: auto;
        border-bottom: 1px dashed #bc9e70;
        margin-bottom: 14rem;
        margin-top: -5rem;
        justify-content: flex-start;
        align-items: center;

        .itemBox {
          display: flex;
          justify-content: center;
          margin-bottom: 10rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            text-align: right;
            width: 270rem;
          }

          span:last-child {
            display: inline-block;
            width: 200rem;
          }
        }

        .basin-left {
          width: 33%;
        }

        .box {
          display: flex;
          margin-bottom: 5rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            width: 200rem;
          }

          span:last-child {
            display: inline-block;
            width: 240rem;
          }
        }

        .box:last-child {
          margin-bottom: 10rem;
        }
      }

      .approve {
        display: flex;
        width: 100%;
        margin-bottom: 10rem;
        border-bottom: 1px dashed #bc9e70;

        .box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-width: 100rem;
          width: auto;
          height: 90rem;
          border-radius: 4px;
          border: 1px solid #d9d9d9;
          padding: 12rem;
          margin-right: 10rem;
          margin-bottom: 10rem;

          span:first-child {
            font-size: 16rem;
          }

          span:last-child {
            font-weight: 500;
            color: #5FB17F;
          }
        }
      }

      .table {
        width: 80%;
        background-color: #e1e1e1;
      }
    }
  }
}

.fontB {
  font-size: 25px;
  color: brown;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
